    <!-- ========================================= ABOUT =============================================== -->
    <section id="about">
        <div class="container">
            <div class="row">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h2 class="block-head">MỤC ĐÍCH CỦA WEBSITE</h2>
                    <div class="about-box full-width">
                        <p>Với việc bùng nổ của internet và sự phát triển không ngừng gia tăng của CNTT, việc tự nghiên cứu tài liệu là hết sức cần thiết của con người. Với kho kiến thức vô cùng lớn được chia sẻ trên internet giúp cho việc nghiên cứu của mọi người trở nên dễ dàng hơn. Vì vậy,  nhóm 4 chọn đề tài làm một website chia sẻ kiến thức về website với phương châm &ldquo;Kiến thức không của riêng ai&rdquo;.</p>
                        <p>Theo nhóm, mặc dù hiện nay trên internet rất nhiều trang web kiến thức về phát triển web (web developer). Nhưng những trang web chia sẻ kiến thức tốt thì đa số là các trang nước ngoài với ngôn ngữ chủ yếu là tiếng anh nên việc tự nghiên cứu của những người yếu về tiếng anh gặp nhiều bất lợi, với những trang tiếng việt thì việc chia sẻ kiến thức không đầy đủ. Chính vì vậy nhóm 4 muốn triển khai website chia sẻ kiến thức qua đó website sẽ chia sẻ kiến thức với ngôn ngữ tiếng việt và chia sẽ kiến thức mới, những thủ thuật hay trong việc phát triển website.</p>
                    </div>
                </div>

                <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                    <h2 class="block-head">WEBSITE CÓ NHỮNG GÌ?</h2>
                    <div class="about-box full-width">

                        <div class="tabbable">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs tabs-about" role="tablist">
                                <li class="active"><a href="#home" role="tab" data-toggle="tab" class="bg-1 text-4"><i class="fa fa-file-text-o icons text-7"></i><span>BÀI VIẾT</span></a></li>
                                <li><a href="#profile" role="tab" data-toggle="tab" class="bg-1 text-4"><i class="fa fa-file-image-o icons text-7"></i><span>ALBUM ẢNH</span></a></li>
                                <li><a href="#messages" role="tab" data-toggle="tab" class="bg-1 text-4"><i class="fa fa-file-movie-o icons text-7"></i><span>VIDEO</span></a></li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="tab-pane fade in active" id="home">
                                    <p>Bài viết được tạo nên bởi Admin quản trị và các thành viên của website. Nội dung bài viết thuộc nhiều lĩnh vực: Công nghệ thông tin, du lịch, mua sắm, vui chơi, giải trí,... Gồm có những thông tin được tạo mới hoặc những thông tin được trích từ các nguồn trên internet. Chúng tôi khuyến khích thành viên tạo mới nội dung bài viết bởi chính mình, trong trường hợp trích dẫn thông tin phải ghi rõ nguồn gốc của bài viết đó.  </p>
                                    <p>Hiện tại, Website <span class="text-3 text-bold">NeedToKnow</span> tập trung vào lĩnh vực Công nghệ thông tin với các bài viết, album và video liên quan đến các chủ đề chính như sau:</p>
                                    <p class="text-italic">- Tìm hiểu về Joomla và Wordpress</p>
                                    <p class="text-italic">- Tìm hiểu về HTML5 &amp; CSS3</p>
                                    <p class="text-italic">- Ngôn ngữ lập trình PHP</p>
                                    <p class="text-italic">- Tìm hiểu về JavaScript</p>
                                    <p class="text-italic">- Tìm hiểu về các Framework như: CakePHP, Zen, Yii,...</p>
                                    <p class="text-italic">- Và các chủ đề khác</p>
                                </div>

                                <div class="tab-pane fade" id="profile">
                                    <p>Tương tự bài viết, các album được tạo nên bởi Admin quản trị và các thành viên của website. Nội dung album thuộc nhiều lĩnh vực: Công nghệ thông tin, du lịch, mua sắm, vui chơi, giải trí,... Gồm có những thông tin được tạo mới hoặc những thông tin được trích từ các nguồn trên internet. Chúng tôi khuyến khích thành viên tạo mới album bởi chính mình, trong trường hợp trích dẫn thông tin phải ghi rõ nguồn gốc của bài viết đó.  </p>
                                </div>

                                <div class="tab-pane fade" id="messages">
                                    <p>Video được lấy từ nhiều nguồn chia sẻ trên internet và dẫn đường link về website chúng tôi. Đây là website chia sẻ, chúng thôi không chịu trách nhiệm và giải quyết trong các trường hợp liên quan tới vấn đề bản quyền của các video này. Xin vui lòng thông cảm!  </p>
                                </div>
                            </div>
                        </div><!--end tabbable-->
                    </div>
                </div><!--end col-->

                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                    <h2 class="block-head">CHÚNG TÔI LÀ AI?</h2>
                    <div class="about-box full-width">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading no-padding">

                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                        <i class="fa fa-expand bg-1 text-6"></i>
                                        <span class="panel-active">
                                            <i class="fa fa-file-excel-o icons no-border"></i>
                                            NHIỆM VỤ
                                        </span>
                                    </a>

                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p class="panel-text">Chúng tôi sẽ là nguồn trao đổi và cung cấp nhiều thông tin, kiến thức tới người xem. Chúng tôi sẽ là cầu nối, giúp những người đang có nhu cầu tìm kiếm những kiến thức cho riêng mình phục vụ trong cuộc sống, học tập cũng như làm việc. Đồng thời, chúng tôi hy vọng rằng đây sẽ là nơi dành cho những người có tâm huyết, muốn tự sáng tạo các bài viết, album, video,.. của riêng mình. Mong muốn chia sẻ và đóng góp những thông tin, kiến thức mà mình đã có đến những người có nhu cầu tìm kiếm. Bởi vì <span class="text-3 text-bold">&ldquo;Kiến thức không của riêng ai&rdquo;</span>.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading no-padding">

                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                        <i class="fa fa-expand bg-1 text-6"></i>
                                        <span class="panel-active">
                                            <i class="fa fa-line-chart icons no-border"></i>
                                            HƯỚNG PHÁT TRIỂN
                                        </span>
                                    </a>

                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p class="panel-text">Đang cập nhật...</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div><!--end col-->

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h2 class="block-head">THÀNH VIÊN</h2>
                    <div class="about-box full-width">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" data-animate="bounceIn">
                                <div class="member-box full-width">
                                    <div class="member-box-img text-center">
                                        <img src="images/member_img01.jpg" alt="member_img01" class="img-responsive">
                                        <h5 class="text-3 text-bold">HUY NGUYỄN</h5>
                                        <p class="text-5 text-italic">Project Leader</p>
                                    </div>
                                    <div class="member-details bg-1 text-6 full-width">
                                        <h5 class="bg-7 text-3 text-center">NGUYỄN PHẠM QUANG HUY</h5>
                                        <p class="text-center">Project Leader</p>
                                        <div class="member-box-info full-width">
                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>                                          
                                        </div>
                                        <div class="member-socials">
                                            <ul class="full-width">
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Facebook" ><i class="fa fa-facebook text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Skype"><i class="fa fa-skype text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Google Plus"><i class="fa fa-google-plus text-4"></i></a>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" data-animate="bounceIn">
                                <div class="member-box full-width">
                                    <div class="member-box-img text-center">
                                        <img src="images/member_img02.jpg" alt="member_img02" class="img-responsive">
                                        <h5 class="text-3 text-bold">HUY PHẠM</h5>
                                        <p class="text-5 text-italic">Project Manager</p>
                                    </div>
                                    <div class="member-details bg-1 text-6 full-width">
                                        <h5 class="bg-7 text-3 text-center">PHẠM TRƯƠNG NGỌC HUY</h5>
                                        <p class="text-center">Project Manager</p>
                                        <div class="member-box-info full-width">
                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                        </div>
                                        <div class="member-socials">
                                            <ul class="full-width">
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Facebook"><i class="fa fa-facebook text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Skype"><i class="fa fa-skype text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Google Plus"><i class="fa fa-google-plus text-4"></i></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" data-animate="bounceIn">
                                <div class="member-box full-width">
                                    <div class="member-box-img text-center">
                                        <img src="images/member_img03.jpg" alt="member_img03" class="img-responsive">
                                        <h5 class="text-3 text-bold">TIẾNPD</h5>
                                        <p class="text-5 text-italic">Coding &amp; Designer</p>
                                    </div>
                                    <div class="member-details bg-1 text-6 full-width">
                                        <h5 class="bg-7 text-3 text-center">PHẠM DUY TIẾN</h5>
                                        <p class="text-center">Coding &amp; Designer</p>
                                        <div class="member-box-info full-width">
                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                        </div>
                                        <div class="member-socials">
                                            <ul class="full-width">
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Facebook"><i class="fa fa-facebook text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Skype"><i class="fa fa-skype text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Google Plus"><i class="fa fa-google-plus text-4"></i></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" data-animate="bounceIn">
                                <div class="member-box full-width">
                                    <div class="member-box-img text-center">
                                        <img src="images/member_img04.jpg" alt="member_img04" class="img-responsive">
                                        <h5 class="text-3 text-bold">GIANG TRANG</h5>
                                        <p class="text-5 text-italic">Project Assitant</p>
                                    </div>
                                    <div class="member-details bg-1 text-6 full-width">
                                        <h5 class="bg-7 text-3 text-center">GIANG THỊ THUỲ TRANG</h5>
                                        <p class="text-center">Project Assitant</p>
                                        <div class="member-box-info full-width">
                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                        </div>
                                        <div class="member-socials">
                                            <ul class="full-width">
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Facebook"><i class="fa fa-facebook text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Skype"><i class="fa fa-skype text-4"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#" data-toggle="tooltip" title="Google Plus"><i class="fa fa-google-plus text-4"></i></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div><!--end container-->
    </section>
    <!-- ========================================= END ABOUT =========================================== -->